<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
<div>
  <input type="file" id="files" style="display: none" onchange="fileImport();">
  <input type="button" id="fileImport" value="导入">
</div>
<script src="jquery-1.8.1.js"></script>
<script>
  //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
  $("#fileImport").click(function () {
    $("#files").click();
  })
  function fileImport() {
    //获取读取我文件的File对象
    var selectedFile = document.getElementById('files').files[0];
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("文件名:"+name+"大小:"+size);

    var reader = new FileReader();//这是核心,读取操作就是由它完成.
    reader.readAsText(selectedFile);//读取文件的内容,也可以读取文件的URL
    reader.onload = function () {
      console.log(this.result)
      var json = JSON.parse(this.result)
      console.log('--------------------')
      console.log(json[1].id)
    }
  }
</script>
</body>
</html>
